<template>
	<view>
		<view class="container">
			<view class="title fwb">什么是购房咨询师？</view>
			<view class="flex-box flex-between tc">
				<view class="flex-grow-1 consultdetail">
					<image src="/static/icon/icon_consult1.png" class="icon_consult"></image>
					<view class="fs32 fwb">高素质</view>
					<view class="col89">
						<view>42% 211、985毕业</view>
						<view>100%本科毕业</view>
					</view>
				</view>
				<view class="flex-grow-1 consultdetail">
					<image src="/static/icon/icon_consult2.png" class="icon_consult"></image>
					<view class="fs32 fwb">严要求</view>
					<view class="col89">
						<view>30天岗前培训</view>
						<view>严格服务考核</view>
					</view>
				</view>
				<view class="flex-grow-1 consultdetail">
					<image src="/static/icon/icon_consult3.png" class="icon_consult"></image>
					<view class="fs32 fwb">更专业</view>
					<view class="col89">
						<view>实地勘查百个楼盘</view>
						<view>提供全城欧盘咨询</view>
					</view>
				</view>
			</view>
			<template v-if="brokerList.total > 0">
				<navigator v-for="(item, index) in brokerList.data" :url="'/pages/broker/consultant_detail/consultant_detail?id=' + item.id"  class="consultant flex flex-between">
					<view class="leftitem flex-grow-1">
						<view class="name fwb">{{ item.nickname }}</view>
						<view class="academic">毕业于{{ item.userprofile.college }}</view>
						<view class="flex-box targetbox">
							<view class="target" v-for="(item1, index1) in item.userprofile.tags_arr"  >{{ item1 }}</view>
						</view>
						<view class="flex-box">
							<view class="flex-grow-1">
								<view class="fs32 fwb">{{ item.userprofile.service_num }} <text class="fs22">人</text></view>
								<view class="col89 fs24">服务客户</view>
							</view>
							<view class="flex-grow-1">
								<view class="fs32 fwb">{{ item.userprofile.take_look_num }} <text class="fs22">次</text></view>
								<view class="col89 fs24">勘察楼盘</view>
							</view>
							<view class="flex-grow-1">
								<view class="fs32 fwb">{{ item.userprofile.satisfaction_degree }} <text class="fs22">%</text></view>
								<view class="col89 fs24">满意度</view>
							</view>
						</view>
					</view>
					<view class="rightitem">
						<image :src="item.avatar" class="consultants" mode="aspectFill"></image>
						<button  @tap.stop.prevent="addAppointLog" data-type="2" data-subtype="0" :data-uid="item.id" class="flex-box flex-center consulthim">
							<view class="fs24">向他咨询</view>
							<image src="/static/icon/icon_goto.png"></image>
						</button>
					</view>
				</navigator>
				<u-loadmore  v-if="brokerList.total > 9" :status="loadStatus" fontSize="24" line loading-text="努力加载中" loadmore-text="轻轻上拉"  nomore-text="没有更多了" />
			</template>
			<template v-else>
				<u-empty
				        mode="data"
						text="暂无数据"
						textSize="24"
				        icon="/static/images/none-data.png"
				>
				</u-empty>
			</template>
		</view>
		<!-- 预约弹窗start -->
		<u-popup :show="popupStatus" mode="center" round="8" @close="closePopupStatus" closeOnClickOverlay>
			<view class="zixun-pop">
				<view class="fs40 black tc mb20">我要咨询</view>
				<view class="fs30 col-darkGray tc mb40">
					<view>虹桥金茂悦有哪些劣势？性价比如何？</view>
					<view>还有什么类似楼盘推荐……</view>
					<view>更多问题，咨询师帮你答疑解惑</view>
				</view>
				<view class="input-box flex-box plr30 mb40" v-if="popupStatus"><input @input="appoint_mobileFun" :value="appoint_mobile" class="input flex-grow-1" type="number" placeholder="请输入手机号码" placeholder-style="color:#ccc;" /></view>
				<view  @tap="submitAppointLog" class="btn1 mb30">确认</view>
				<!-- <view @tap="jumpToChat" :data-uid="broker_user_id" class="btn2 mb20">立即微聊</view> -->
				<button open-type="contact" class="btn2 mb20">立即微聊</button>
			</view>
		</u-popup>
		<!-- 预约弹窗end -->
		<!-- 预约成功弹窗start -->
		<u-popup :show="reserveStatus" mode="center" closeable :safeAreaInsetBottom="false" @close="closeReserveStatus">
			<view class="reserve">
				<image src="/static/icon/icon_reserve.png" class="icon_reserve"></image>
				<view class="title1">预约成功</view>
				<view class="title2">用手机号码{{ appoint_mobile_text }}预约了咨询服务，稍后经纪人将为您解答疑问，请注意接听电话</view>
				<button @tap="closeReserveStatus" class="reserve-btn1">好的</button>
				<!-- <button @tap="jumpToChat" :data-uid="broker_user_id" class="reserve-btn2">立即微聊</button> -->
				<button open-type="contact" class="reserve-btn2">立即微聊</button>
			</view>
		</u-popup>
		<!-- 预约成功弹窗end -->
	</view>
</template>

<script>
	const app = getApp();
	
	const functions = require('../../../utils/functions.js');
	export default {
		data() {
			return {
				loadStatus:'loadmore',//加载状态
				
				popupStatus: false,
				//订阅咨询预约弹窗
				reserveStatus: false,
				//预约成功弹窗
				// 预约订阅类型
				appoint_type: 1,
				//分类:1=订阅动态,2=留电咨询,3=领取免费专车,4=帮你找房,5=咨询房价走势
				// 订阅分类
				appoint_subscribe_type: 0,
				//订阅通知类型:0=无订阅,1=订阅变价通知,2=订阅开盘通知,3=订阅实时动态
				// 预约手机号
				appoint_mobile: '',
				appoint_mobile_text: '',
				broker_user_id: 0,
				brokerList: {
					total: 0,
					current_page: 0,
					last_page: 1,
					data: []
				}
			};
		},
		onLoad: function (options) {
			this.initData();
		},
		onPullDownRefresh: function () {
			uni.showNavigationBarLoading(); //在标题栏中显示加载
	
			var that = this; //模拟加载
	
			setTimeout(function () {
				that.initData();
				uni.stopPullDownRefresh(); //停止下拉刷新
			}, 1500);
		},
		onReachBottom: function () {
			if (this.brokerList.current_page >= this.brokerList.last_page) {
				this.loadStatus='nomore';
				return false;
			} else {
				this.getBrokerList();
			}
		},
		methods: {
			getBrokerList: function () {
				var that = this;
				var now_city = uni.getStorageSync('now_city') || '上海市';
				var json = {
					city: now_city
				};
				json.page = Number(that.brokerList.current_page) + 1;
	
				if (json.page > 1 && that.brokerList.current_page >= that.brokerList.last_page) {
					functions.toast('已加载到底部了');
					this.loadStatus='nomore';
					return false;
				}
				this.loadStatus='loading';
				functions.getAjaxList(that, '/api/xiluhouse/User/broker_list', json, function (res) {
					var brokerList = res.data;
	
					if (json.page > 1) {
						var now_brokerList_data = that.brokerList.data || [];
						var now_brokerList_data = now_brokerList_data.concat(brokerList.data);
						brokerList.data = now_brokerList_data;
					}
					if(brokerList.current_page >= brokerList.last_page){
						that.loadStatus='nomore';
					}
					that.brokerList=brokerList
				});
			},
	
			initData: function () {
				this.brokerList.current_page= 0
				this.getBrokerList();
			},
			jumpToChat(e) {
				var uid = e.currentTarget.dataset.uid || 0;
				var that = this;
				functions.checkLogin(function (ret) {
					if (ret) {
						functions.jumpToChat(uid);
					} else {
						functions.toast('请先登录');
					}
				});
			},
			// 添加预约记录
			addAppointLog(e) {
				this.appoint_type= e.currentTarget.dataset.type;
				this.appoint_subscribe_type= e.currentTarget.dataset.subtype;
				this.broker_user_id= e.currentTarget.dataset.uid || 0; 
				// 处理手机号码
				this.appoint_mobile= uni.getStorageSync('mobile') || this.appoint_mobile;
				this.popupStatus=true;
			},
			appoint_mobileFun(e) {
				this.appoint_mobile=e.detail.value
			},
			// 提交预约日志
			submitAppointLog() {
				var that = this;
				if (that.appoint_mobile.length != 11) {
				  functions.toast('请输入正确的手机号');
				  return false;
				}
				functions.checkLogin(function (ret) {
					if (ret) {
						var appoint_mobile = uni.getStorageSync('mobile');
						that.appoint_mobile=appoint_mobile;
			
						functions.submitAjaxData(
							that,
							'/api/xiluhouse/house/create_appoint_log',
							{
								type: that.appoint_type,
								subscribe_type: that.appoint_subscribe_type,
								mobile: that.appoint_mobile,
								broker_user_id: that.broker_user_id,
								city: that.now_city,
							},
							function (res) {
								that.appoint_mobile = that.appoint_mobile;
								that.appoint_mobile_text = appoint_mobile.substr(0, 3) + '****' + appoint_mobile.substr(7);
								that.reserveStatus=true;
								that.popupStatus=false;
							}
						);
					} else {
						functions.toast('请先登录');
					}
				});
			},
			closePopupStatus() {
				this.popupStatus=false;
			},
			closeReserveStatus() {
				this.reserveStatus=false;
			},
		}
	}
</script>

<style lang="scss">
	.zixun-pop {
		position: relative;
		padding: 90rpx 40rpx 40rpx;
		width: 600rpx;
		max-height: 900rpx;
		background: #ffffff;
		overflow-y: scroll;
		border-radius: 8rpx;
	}
	.zixun-pop .input-box {
		width: 100%;
		height: 90rpx;
		background: #f6f7fa;
		border-radius: 10rpx;
	}
	.zixun-pop .input {
		font-size: 30rpx;
		color: #333;
		line-height: 42rpx;
	}
	.zixun-pop .btn1 {
		width: 100%;
		height: 90rpx;
		background: #0091ff;
		box-shadow: 0 4rpx 40rpx 0 rgba(3, 103, 179, 0.3);
		border-radius: 10rpx;
		font-size: 30rpx;
		color: #ffffff;
		line-height: 90rpx;
		text-align: center;
	}
	.zixun-pop .btn2 {
		width: 100%;
		height: 90rpx;
		background: #ff7b40;
		box-shadow: 0 4rpx 40rpx 0 rgba(248, 103, 56, 0.3);
		border-radius: 10rpx;
		font-size: 30rpx;
		color: #ffffff;
		line-height: 90rpx;
		text-align: center;
	}
.container{padding: 40rpx;min-height: auto;}
.title{ font-size: var(--fs34);line-height: 45prx;padding-bottom: 33rpx;}
.icon_consult{width: 120rpx;height: 120rpx;margin-bottom: 20rpx;}
.consultdetail .col89{padding-top: 27rpx;}
.consultdetail .col89 view{font-size: var(--fs24);}

.consultant{width: 100%;height: 325rpx;overflow: hidden;  border-radius: 10rpx;border: solid 1px #eeeeee;margin-top: 30rpx;}

.leftitem{padding: 40rpx 30rpx;}
.leftitem .name{  font-size: var(--fs34);padding-bottom: 13rpx;}
.leftitem .academic{  font-size: var(--fs24);color: #898989;padding-bottom: 9rpx;}
.leftitem .targetbox{width: 100%;padding-bottom: 30rpx;overflow-x: scroll;white-space: nowrap;}
.leftitem .targetbox .target{padding: 2rpx 7rpx; font-size: var(--fs22);color: var(--normal);background: #E5F4FF;margin-right: 10rpx;}
.leftitem .fs32.fwb{letter-spacing: -1px;}
.rightitem{width: 240rpx;position: relative;height: 325rpx;}
.consultants{width: 240rpx;height: 325rpx;position: relative;z-index: 1;}

.rightitem .sharebtn{padding: 0;margin: 0;position: absolute;right: 10rpx;top: 10rpx;width: 50rpx;height: 50rpx;z-index: 2;background: transparent;}
.rightitem .sharebtn image{width: 30rpx;height: 30rpx;}
.rightitem .consulthim{ width: 175rpx;height: 55rpx;border-radius: 10rpx;background: var(--normal);box-shadow: 0rpx 4rpx 40rpx rgba(3,103,179,0.3);position: absolute;left: 0;right: 0;bottom: 26rpx;margin: auto;color: #fff;z-index: 2;padding: 0;font-weight: normal;}
.rightitem .consulthim image{width: 22rpx;height: 22rpx;margin-left: 10rpx;}
</style>
